<template>
    <div>
        <div  v-if="this.edit">
        <div style="padding:10px 0">
            {{this.Year}}年计划
            <div class="pickerOption">
                <el-button  style="margin 0 10px" size="small" type="primary" @click="editData">新建销售计划</el-button>
            </div>
        </div>
        <div style="clear:both;margin:10px 0">
            <el-card>
                <el-select size="small" placeholder="选择时间"
                           v-model="chooseYear" @change="chooseyearForChange"
                           style="width: 156px;">
                    <el-option v-for="(n,index) in 10"
                               :key="index" :label="Year - n" :value="Year - n">
                    </el-option>
                </el-select>
                当前计划:{{this.getAllMonthPlanData.draftName}}
                <div class="pickerOption">
                    当前时间{{this.Year}}年{{this.Mon}}月{{this.time}}日&nbsp;&nbsp;&nbsp;
                    <el-button  style="margin 0 10px" size="small" type="primary" >详情</el-button>
                </div>
                <el-row  :gutter="20" style="margin:20px 0">
                    <el-col :span="12">
                        <el-row  :gutter="20" style="margin:20px 0">
                                <el-col :span="12"  style="text-align:center">
                                    <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                        <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                            {{this.getAllMonthPlanData.yearPlanCount}}
                                        </div>
                                    </div>
                                    <p>年计划销售额(万元)</p>
                                </el-col>
                                <el-col :span="12"  style="text-align:center">
                                    <el-progress type="circle" :percentage="this.getAllMonthPlanData.yearPlanAmount"></el-progress>
                                    <p>年销售额完成度</p>
                                </el-col>
                            </el-row>
                    </el-col>
                    <el-col :span="12">
                        <el-row  :gutter="20" style="margin:20px 0">
                            <el-col :span="12"  style="text-align:center">
                                <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                    <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                        {{this.getAllMonthPlanData.categoryNumber}}
                                    </div>
                                </div>
                                <p>品类数</p>
                            </el-col>
                            <el-col :span="12"  style="text-align:center">
                                <div style="height:126px;width:126px;background:pink;padding:7px;border-radius: 50%;margin:3px auto;background: linear-gradient(to right, #9c96e7, #64bef5);">
                                    <div style="width:100%;height:100%;border-radius: 50%;background:#fff;line-height:106px">
                                        {{this.getAllMonthPlanData.productCodeNumber}}
                                    </div>
                                </div>
                                <p>产品数</p>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
                <div id="saleSummaryChart" style="height: 300px;width:100%;text-align:center"></div>
                 <el-date-picker size="mini" @change="changeTime"
                                 v-model="dataPicker" type="datetimerange"
                                 range-separator="至" start-placeholder="开始日期"
                                 end-placeholder="结束日期">
                  </el-date-picker>
                 <el-table :data="table" style="width: 100%;margin-top:20px">
                    <el-table-column
                        type="index"
                        label="排名"
                        width="80">
                    </el-table-column>
                    <el-table-column
                        prop="draftName"
                        label="月计划">
                    </el-table-column>
                    <el-table-column
                        prop="draftStatu"
                        label="状态">
                    </el-table-column>
                    <el-table-column
                        prop="planSaleAmount"
                        label="计划销额">
                    </el-table-column>
                    <el-table-column
                        prop="completionRate"
                        sortable
                        label="完成度">
                    </el-table-column>
                    <el-table-column
                        prop="categoryName"
                        sortable
                        label="品类">
                    </el-table-column>
                    <el-table-column
                        prop="productName"
                        label="产品"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="dataTime"
                        label="创建时间"
                        sortable>
                    </el-table-column>
                    <el-table-column
                        prop="name"
                        label="操作"
                        width="180">
                        <template slot-scope="scope">
                            <el-button type="text" @click="showdeltail = true">详情</el-button>
                        </template>
                    </el-table-column>
                 </el-table>
             </el-card>
        </div>
    </div>
    <div v-else >
        <el-button @click="postGlass" style="float:right" size="mini" type="primary">保存为草案</el-button>
          <el-button @click="back" style="float:right;margin-right:10px" size="mini" type="primary">发布计划</el-button>
        <el-button @click="back" style="float:right;margin-right:10px" size="mini" type="primary">返回</el-button>
        <div>新建月计划</div>
        <div>
            <el-select size="mini" placeholder="请选择">
                <el-option v-for="(n,index) in 4" :key="index"
                           :label="n" :value="n">
                </el-option>
            </el-select>
            <el-select size="mini" placeholder="请选择">
                <el-option v-for="(n,index) in 4"
                           :key="index" :label="n.label"
                           :value="n.value">
                </el-option>
            </el-select>
            <br>
            <span>
                月计划总额<span style="font-size:18px;color:red">{{ this.priceTotal}}</span> 万,月计划总量<span style="font-size:18px;color:red">{{this.sellTotal}}</span>万
            </span>
            <br>
            <el-select  size="mini" placeholder="请选择">
                <el-option v-for="(n,index) in 4" :key="index"
                           :label="n" :value="n">
                </el-option>
            </el-select>
            <el-select  size="mini" placeholder="请选择">
                <el-option v-for="(n,index) in 4"
                           :key="index" :label="n" :value="n">
                </el-option>
            </el-select>
            产品:
             <el-select  size="mini" placeholder="请选择">
                <el-option v-for="(n,index) in 4"
                           :key="index" :label="n"
                           :value="n">
                 </el-option>
            </el-select>
        </div>
        <div style="padding:10px">
            <el-row :gutter="20">
                <el-col :span="8" v-for="(item,index) in getProductsBySelectiveData" :key="index">
                    <el-card style="width:100%;display:inline-block;margin:10px" >
                        <p style="font-size:26px">{{item.productName}}<span style="font-size:16px;float:right;margin-top:10px">均价:<span style="color:red">{{item.guidePrice}}</span></span></p>
                        <div style="margin:10px">
                            <el-tag size="mini" v-if="item.productType">{{item.productType}}</el-tag>
                            <el-tag size="mini" v-else="item.productType">空</el-tag>
                            <el-tag size="mini" type="success" v-if="item.categoryName">{{item.categoryName}}</el-tag>
                            <el-tag size="mini" type="success" v-else="item.categoryName">空</el-tag>
                            <span style="float: right;"></span>
                        </div>
                        <div style="margin:10px;line-height:22px">
                            <span >计划销额:<span style="font-size:25px;color:#8e71c7">{{item.guidePrice * item.planSaleCount}}</span>万元</span>
                            <span style="float: right;line-height:30px">&nbsp;&nbsp;万件</span>
                            <el-input v-model="item.planSaleCount" style="float: right;width:90px" size="mini" placeholder="请输入内容"></el-input>&nbsp;
                            <span style="float: right;font-size:14px;line-height:30px">计划销量:&nbsp;</span>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </div>
    </div>
    </div>
</template>

<script>
  import * as opreate from 'api/getData'

  export default {
    name: 'mon',
    data(){
      return {
        edit:true,
        chooseYear: '',
        firstTime: null,
        lastTime: null,
        dataPicker: [],
        Year: '',
        mon: '',
        time: '',
        getAllMonthPlanData: [],
        table:[],
        productCode:null,
        mainchart: [],
        getProductsBySelectiveData: [],
        priceTotal: 0,
        sellTotal: 0
      }
    },
    mounted () {
      this.getDate()
      this.getAllMonthPlan()
      this.chooseyearForChange()
    },
    methods: {
      postGlass(){
        let tempSet = []
        tempSet = this.getProductsBySelectiveData
        for (let idx in this.getProductsBySelectiveData){
          if('0' === this.getProductsBySelectiveData[idx].planSaleCount.toString()){
            tempSet.splice(idx--,1)
          }else {

          }
        }
        opreate.updateDraftByDraftId({ tempSet }).then(res => {
          this.$message.success('保存成功')
        })
      },
      editData() {
        this.edit = false
        opreate.getProdBySelect({}).then(res => {
          this.getProductsBySelectiveData = res.data
        })
      },
      back() {
          this.edit = true
      },
      changeTime() {
         this.firstTime = this.dataPicker[0]
         this.lastTime = this.dataPicker[1]
         this.chooseDataPicker()
      },
      chooseyearForChange() {
        opreate.detailPlanYear({
          yearPlanTime: this.Year - 1
        }).then(res =>{
          this.getAllMonthPlanData = res.data
        })
        opreate.getSaleMonthData({
          productCode: this.productCode,
          dateTime: this.chooseYear
        }).then(res => {
          let [  getAllMonthPlanData = [], mainChart = [] ] = res.data || []
          this.mainchart = mainChart
          this.getAllMonthPlanData = getAllMonthPlanData
          let option = {
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                type: 'cross',
                crossStyle: {
                  color: '#999'
                }
              }
            },
            toolbox: {
              feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
              }
            },
            legend: {
              data:['销售量','销售额']
            },
            xAxis: [
              {
                type: 'category',
                data: this.mainchart.map(item => item.dateTime)
              }
            ],
            yAxis: [
              {
                type: 'value',
                name: '销售量',
                min: 0,
                max: 50000,
                interval: 10000,
                axisLabel: {
                  formatter: '{value} '
                }
              },
              {
                type: 'value',
                name: '销售额',
                min: 0,
                max: 1000,
                interval: 100,
                axisLabel: {
                  formatter: '{value} '
                }
              }
            ],
            series: [
              {
                name:'销售量',
                type:'bar',
                barMaxWidth: '25px',
                data:this.mainchart.map(item => item.actualSalesCount)
              },
              {
                name:'销售量',
                type:'line',
                smooth: true,
                data:this.mainchart.map(item => item.actualSalesCount)
              },
              {
                name:'销售额',
                type:'bar',
                barMaxWidth: '25px',
                data:this.mainchart.map(item => item.actualSalesAmount)
              },
              {
                name:'销售额',
                type:'line',
                smooth: true,
                data:this.mainchart.map(item => item.actualSalesAmount)
              }
            ]
          };
          myChart.setOption(option);  // 使用刚指定的配置项和数据显示图表
        })
        let myChart = this.$echarts.init(document.getElementById('saleSummaryChart'));
        myChart.resize({ width: 1600 });
      },
      getDate() {
          let newDate = new Date()
          this.Year = newDate.getFullYear();
          this.Mon = newDate.getMonth() + 1;
          this.time = newDate.getDate()
      },
      chooseDataPicker() {
        opreate.detailPlanYear({
          yearPlanTime: this.Year,
          firstTime: this.firstTime,
          lastTime: this.lastTime
        }).then(res => {
          this.table = res.data.list
        })
      },
      getAllMonthPlan() {
        opreate.detailPlanYear({
          yearPlanTime: this.Year,
          firstTime: this.firstTime,
          lastTime: this.lastTime
        }).then(res => {
          this.getAllMonthPlanData = res.data
          this.table = res.data.list
        })
      }
    },
    watch: {
      getProductsBySelectiveData:{
        handler(newVal,oldVal){
          let price = 0, sell = 0
          for (let index in newVal){
            price += (newVal[index].guidePrice * newVal[index].planSaleCount)
            sell += Number(newVal[index].planSaleCount)
          }
          this.priceTotal = price
          this.sellTotal = sell
        },
        deep:true
      }
    }
}
</script>

<style scoped>
  .card_bg{
      padding: 10px 20px;
      border-bottom: 1px solid #ebeef5;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      background: #f5f7fa;
  }
  .Done {
      float: right;
      padding: 3px 0px;
      width: 80px;
      height: 81px;
      background: #0099CC;
      line-height: 80px;
      border-radius: 50%;
      text-align: center;
      position: absolute;
      right: -14px;
      top: -14px;
      color: #fff
  }
  .CardText {
      text-align: center;
      border-top: 1px solid #e2e2e2;
  }
  .itemTitle {
      background-color: #E8EEF4;
      height: 40px;
      padding: 0px 12px;
      line-height: 40px;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
  }
  .text {
    font-size: 14px;
  }
  .item {
    margin-bottom: 18px;
  }
  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }
  .box-card {
    width: 100%;
  }
  .optimizationName span{
      color: #fec63c;
      font-weight: 500
  }
  .optimizationName {
      width: 100%;
      height: 45px;
      line-height: 55px;
      display: block;
      padding-left: 15px;
      background-color: #E8EEF4;
  }
  .optimizationNameTitle {
      width: 100%;
      height: 35px;
      line-height: 35px;
      display: block;
      padding-left: 15px;
      background-color: #fff;
  }
  .optimizationIndex-container{
      background: #E8EEF4
  }
  .summaryHeader {
    padding: 10px 12px;
  }
  .whiteContainer {
    padding: 0 12px;
  }
  .contentHeader{
    display: flex;
    justify-content: space-between;
    height: 50px;
    align-items: center;
  }
  .pickerOption {
    display: flex;
    align-items: center;
    float: right;
  }
</style>
